<template>
  <!-- 货物装载列表 -->
  <div>
    <div class="btn-box" v-if="showBtn">
      <div class="btn_left">
        <el-button type="text" @click="addNewData"> 载入货物 </el-button>
        <el-button type="text" @click="copyOne">复制</el-button>
        <el-button type="text" @click="deleteData">删除</el-button>
      </div>
    </div>
    <div class="statistical-information">
      <span class="statistical-title">总件数：</span>
      <span class="statistical-number">{{ calculateSum.pkgsSum }}</span>
      <span class="statistical-title">总毛重：</span>
      <span class="statistical-number">{{ calculateSum.weightSum }}</span>
      <span class="statistical-title">总体积：</span>
      <span class="statistical-number" style="margin-right: 0px">{{
        calculateSum.volumSum
      }}</span>
    </div>
    <el-form
      :model="tableData"
      label-width="0"
      label-suffix="："
      ref="tableFormRef"
      :show-message="false"
      :rules="boxAndCargoTableDataRuls"
      v-loading="tableLoading"
    >
      <el-table
        :data="tableData.boxAndCargoTableData"
        border
        max-height="400px"
        size="small"
        ref="tableRef"
        @cell-click="cellClick"
        @selection-change="handleSelectionChange"
        :row-style="selectRowClassName"
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
          v-if="showBtn"
        />
        <el-table-column align="center" label="箱型箱尺" width="120">
          <template #default="scope">
            <span>
              {{ scope.row.containerSize }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="箱号" width="120">
          <template #default="scope">
            {{ scope.row.containerNo }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="封号" width="120">
          <template #default="scope">
            <span>
              {{ scope.row.sealNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="报关提单号" width="120">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-select
                v-model="scope.row.blno"
                placeholder="请选择"
                size="small"
                @change="repalceData(scope.row)"
              >
                <el-option
                  v-for="(item, index) in ticketList"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </div>
            <span v-else>
              {{ scope.row.blno }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="英文品名" width="120">
          <template #header>
            <div class="table-header">英文品名</div>
          </template>
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-form-item
                :prop="'boxAndCargoTableData.' + scope.$index + '.cargoName'"
                :rules="boxAndCargoTableDataRuls.cargoName"
                v-if="scope.$index >= 0"
              >
                <el-select
                  v-model="scope.row.cargoName"
                  placeholder="请选择"
                  remote
                  clearable
                  filterable
                  @change="repalceData(scope.row)"
                  @blur="
                    boxSelectBlur(scope.$index, scope.column.no, scope.row)
                  "
                  :remote-method="getAllCargoEnName"
                  size="small"
                  :loading="carergoEnSelectLoading"
                >
                  <el-option
                    v-for="(item, index) in carergoEnSelect"
                    :key="index"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </el-form-item>
            </div>
            <span v-else>
              {{ scope.row.cargoName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="HS CODE" width="120">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-autocomplete
                v-model="scope.row.hscode"
                :fetch-suggestions="queryContainCode"
                placeholder="请输入后搜索"
                style="width: 100%"
                value-key="label"
                :clearable="true"
                @change="repalceData(scope.row)"
                @select="repalceData(scope.row)"
              ></el-autocomplete>
            </div>
            <span v-else>
              {{ scope.row.hscode }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="单证装箱件数" width="140">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-input
                v-model="scope.row.pkgs"
                size="small"
                placeholder="请输入"
                @change="repalceData(scope.row)"
                @input="scope.row.pkgs = validateNumber(scope.row.pkgs)"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.pkgs }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="包装单位" width="120">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <selectDown
                v-model:modelData="scope.row.packageType"
                placeholder="请选择"
                urlType="CsPackageType"
                :fit-input-width="false"
                :autoWidth="true"
                @getOption="repalceData(scope.row)"
              >
              </selectDown>
            </div>
            <span v-else>
              {{ scope.row.packageType }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="毛重（KGS）" width="140">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-input
                v-model="scope.row.grossWeight"
                size="small"
                placeholder="请输入"
                @change="repalceData(scope.row)"
                @input="
                  scope.row.grossWeight = validateOnlyNumberTwo(
                    scope.row.grossWeight
                  )
                "
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.grossWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="体积(CBM)" width="140">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-input
                v-model="scope.row.measurement"
                size="small"
                placeholder="请输入"
                @change="repalceData(scope.row)"
                @input="
                  scope.row.measurement = validateOnlyNumberTwo(
                    scope.row.measurement
                  )
                "
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.measurement }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="唛头">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-input
                v-model="scope.row.marks"
                size="small"
                placeholder="请输入"
                @change="repalceData(scope.row)"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.marks }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="UN Code(危)" width="120">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-input
                v-model="scope.row.unCode"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.unCode }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="类别(危)" width="120">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-input
                v-model="scope.row.cargoClass"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.cargoClass }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="联系电话(危)">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-input
                v-model="scope.row.telephone"
                size="small"
                placeholder="请输入"
                @change="
                  scope.row.telephone = validataPhoneAndTelephone(
                    scope.row.telephone
                  )
                "
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.telephone }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="联系人(危)">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-input
                v-model="scope.row.contacts"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.contacts }}
            </span>
          </template>
        </el-table-column> -->
      </el-table>
    </el-form>
    <el-dialog
      :title="dialogData.title"
      v-model="dialogData.show"
      width="800px"
      @close="dailogClose"
    >
      <el-form
        :model="formData"
        :rules="formRules"
        label-width="75px"
        label-suffix="："
        ref="formRef"
        class="cargo-container"
        :show-message="false"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="报关提单号" prop="ctnNoEN">
              <el-select
                v-model="formData.bookingId"
                placeholder="请选择"
                size="small"
                @change="setSelectTableBlno"
              >
                <el-option
                  v-for="(item, index) in ticketList"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="新增货物">
              <el-table
                :data="formDataTable"
                stripe
                border
                height="360px"
                size="small"
                @selection-change="handleSelectionAdd"
              >
                <el-table-column align="center" type="selection" width="40" />
                <el-table-column
                  align="center"
                  type="index"
                  label="序号"
                  width="50"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  label="中文品名"
                  width="120"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <span>
                      {{ scope.row.cargoChName }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="英文品名"
                  width="120"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <span>
                      {{ scope.row.cargoName }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="HS CODE"
                  width="120"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <span>
                      {{ scope.row.hscode }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="计划件数"
                  width="120"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <span>
                      {{ scope.row.pkgs }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="包装单位"
                  width="120"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <span>
                      {{ scope.row.containerTareWeight }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="毛重(KGS)"
                  width="120"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <span>
                      {{ scope.row.grossWeight }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="体积(combinebooking)"
                  width="120"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <span>
                      {{ scope.row.measurement }}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-form-item label="">
            <div class="statistical-information">
              <span class="statistical-title">总件数：</span>
              <span class="statistical-number">{{
                calculateCargoSum.pkgsSum
              }}</span>
              <span class="statistical-title">总毛重：</span>
              <span class="statistical-number">{{
                calculateCargoSum.weightSum
              }}</span>
              <span class="statistical-title">总体积：</span>
              <span class="statistical-number">{{
                calculateCargoSum.volumSum
              }}</span>
            </div>
          </el-form-item>
        </el-row> -->
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel" type="default" size="small"
            >取消</el-button
          >
          <el-button type="primary" size="small" @click="addCargo">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, toRaw } from 'vue'
import selectDown from './selectDownNew.vue'
import childTable from './../components/docDetailBoxTableChild.vue'
import docDetailBoxAllGoodsTable from './docDetailBoxAllGoodsTable.vue'
import {
  validateOnlyNumberTwo,
  validateNumber,
  validataPhoneAndTelephone
} from '@/utils/validate.js'
export default defineComponent({
  components: {
    selectDown,
    childTable
  },
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {}
    },
    //是否处于编辑状态
    showBtn: {
      type: Boolean,
      default: false
    },
    //详细数据副本
    detailDataCopy: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['update:detailData'],
  computed: {
    data: {
      get() {
        return this.detailData
      },
      set(value) {
        this.$emit('update:detailData', value)
      }
    }
  },
  data() {
    return {
      tableData: {
        boxAndCargoTableData: []
      },
      tableLoading: false,
      rowIndex: -1, //行索引
      columnIndex: -1, //列索引
      tableSelect: [],
      tableSelectAdd: [],
      ticketList: [], //分票数据
      calculateSum: {
        pkgsSum: 0,
        weightSum: 0,
        volumSum: 0
      },
      // 选择货物
      // calculateCargoSum: {
      //   pkgsSum: 0,
      //   weightSum: 0,
      //   volumSum: 0
      // },
      // 用于autocompelte组件
      timeout: null,
      dialogData: {
        title: '载入货物',
        show: false
      },
      // 是否已选择集装箱列表
      rowBoxs: '',
      boxAndCargoTableDataRuls: {
        cargoName: [
          {
            required: true,
            message: '请填写英文品名',
            trigger: ['blur', 'change']
          }
        ]
      },
      formRules: {
        ctnNoEN: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      // carergoEnSelect
      carergoEnSelect: [],
      carergoEnSelectLoading: false,
      // 获取所有货物的数据
      formDataTable: [],
      formData: {
        bookingId: '', //提单id
        blno: '',
        containerId: '', //箱号id
        packings: [] //选中的货物
      }
    }
  },
  mounted() {
    // this.getTicketData()
  },
  methods: {
    validateNumber,
    validateOnlyNumberTwo,
    validataPhoneAndTelephone,

    // 替换对应的装载的货物
    repalceData(row) {
      let index = this.detailData.packings.findIndex((t) => t.id == row.id)
      this.detailData.packings[index] = row
      console.log(this.detailData.packings, row, 'row')
    },

    // 获取所有可以选择的货物
    async getAllCargos() {
      this.dialogData.show = true
      let res = await this.$http.get('/api/secargo/query', {
        BookingId: this.$route.query.id
      })
      this.formDataTable = res.content
    },
    //弹框选择提单号
    setSelectTableBlno(val) {
      for (const item of this.ticketList) {
        if (item.value == val) {
          this.formData.blno = item.label
          break
        }
      }
    },

    async boxSelectBlur(rowIndex, columnIndex) {
      await validateBoxes()
    },

    // 获取拆票数据
    async getTicketData() {
      let res = await this.$http.get('/api/sebooking/getsplitorders', {
        id: this.$route.query.id
      })
      res.data.forEach((item) => {
        item.label = item.blno
        item.value = item.id
      })
      if (!res.data.length) {
        this.ticketList = [
          {
            label: this.data.blno,
            value: this.$route.query.id
          }
        ]
      } else {
        this.ticketList = res.data
      }
    },

    // 关闭弹框重置数据
    dailogClose() {
      this.formData = {
        bookingId: '', //提单id
        blno: '',
        containerId: '', //箱号id
        packings: [] //选中的货物
      }
      this.$refs.formRef.resetFields()
    },

    // 载入货物
    async addCargo() {
      if (this.tableSelectAdd.length && this.formData.bookingId) {
        for (const iterator of this.tableSelectAdd) {
          // 编辑对应的集装箱装载货物的属于新增的货物所属
          let index = 0
          for (const item of this.detailData.packings) {
            if (item.id.includes('new')) {
              index += 1
            }
          }
          iterator.cargoId = iterator.id
          iterator.containerNo = this.rowBoxs.containerNo
          iterator.sealNo = this.rowBoxs.sealNo
          iterator.containerId = this.rowBoxs.id
          iterator.containerSize = this.rowBoxs.containerSize
          iterator.bookingId = this.$route.query.id
          iterator.blno = this.formData.blno
          iterator.id = 'new' + index
          this.detailData.packings.unshift(iterator)
          this.tableData.boxAndCargoTableData.unshift(iterator)
          console.log(
            this.detailData.packings,
            this.tableData.boxAndCargoTableData,
            'add'
          )
        }
        this.dialogData.show = false
      } else {
        this.$message.warning('请至少选择一个货物，并填写报关提单号')
      }
    },

    // 复制一条数据
    async copyOne() {
      if (this.tableSelect.length) {
        for (const iterator of this.tableSelect) {
          // 编辑对应的集装箱装载货物的属于新增的货物所属
          let index = 0
          for (const item of this.detailData.packings) {
            if (item.id.includes('new')) {
              index += 1
            }
          }
          let copyData = JSON.parse(JSON.stringify(iterator))
          copyData.id = 'new' + index
          this.detailData.packings.unshift(copyData)
          this.tableData.boxAndCargoTableData.push(copyData)
        }
      } else {
        this.$message.warning('请选择一条数据')
      }
    },

    // 获取全部货物的的英文品名
    async getAllCargoEnName() {
      this.carergoEnSelect = []
      let res = await this.$http.get('/api/secargo/query', {
        BookingId: this.$route.query.id
      })
      let cargoEnNameList = []
      for (const iterator of res.content) {
        if (cargoEnNameList.indexOf(iterator.cargoName) == -1) {
          cargoEnNameList.push(iterator.cargoName)
        }
      }
      for (const item of cargoEnNameList) {
        this.carergoEnSelect.push({
          label: item,
          value: item
        })
      }
    },
    queryContainCode(val, cb) {
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      this.timeout = setTimeout(async () => {
        let res = await this.$http.get('/api/cshscode/querypage', {
          PageIndex: 1,
          PageSize: 50,
          KeyWords: val
        })
        if (res) {
          let options = res.content.map((item) => {
            return {
              id: item.id,
              value: item.cmCode,
              label: item.cmCode,
              selectLabel: item.cmCode
            }
          })
          cb(options)
        } else {
          console.error(error)
          cb([])
        }
      }, 200)
    },

    // 设置当前表所有操作验证必填项是否填写
    async validateBoxes() {
      let falg = true
      await this.$refs.tableFormRef.validate((res) => {
        falg = res
      })
      if (!falg) {
        this.$message.error('请填写英文品名')
      }
      return falg
    },

    // 设置集装箱列表是否已选择
    setBox(row) {
      this.rowBoxs = row
      this.tableData.boxAndCargoTableData = []
      this.tableData.boxAndCargoTableData = this.detailData.packings.filter(
        (item) => {
          if (item.containerId == row.id) {
            return item
          }
        }
      )
    },

    //单元格被点击时会触发该事件
    async cellClick(row, column, cell, event) {
      if (column.no != 0) {
        if (this.showBtn) {
          let falg = await this.validateBoxes()
          if (falg) {
            this.rowIndex = this.tableData.boxAndCargoTableData.findIndex(
              (t) => t == row
            )
            this.columnIndex = column.no
          }
        }
      }
    },
    // 高亮勾选行
    selectRowClassName({ row, rowIndex }) {
      if (this.tableSelect.includes(row)) {
        return {
          'background-color': '#5A9CF819'
        }
      }
      return ''
    },
    //输入框失去焦点事件
    inputBlur(scope) {
      this.rowIndex = -1
      this.columnIndex = -1
    },
    /**
     * 选择后的数据
     */
    handleSelectionChange(val) {
      let arr = []
      for (let item of val) {
        let ret = toRaw(item)
        if (ret !== undefined) {
          arr.push(ret)
        }
      }
      this.tableSelect = arr
    },
    /**
     * 载入货物选择
     */
    handleSelectionAdd(val) {
      let arr = []
      for (let item of val) {
        let ret = toRaw(item)
        if (ret !== undefined) {
          arr.push(ret)
        }
      }
      this.tableSelectAdd = arr
    },

    async addNewData() {
      if (!this.data.blno && this.ticketList.length == 0) {
        this.$message.warning('请在操作详情页面输入提单号')
        return
      }
      if (!this.rowBoxs) {
        this.$message.warning('请选择一个集装箱')
        return
      }
      this.getAllCargos()
      this.getTicketData()
    },

    async produceBlur(rowIndex, columnIndex) {
      await this.$refs.tableFormRef.validate()
    },

    // 删除
    async deleteData() {
      if (this.tableSelect.length > 0) {
        for (let i = this.tableSelect.length - 1; i >= 0; i--) {
          let deleteIndex = this.tableData.boxAndCargoTableData.findIndex(
            (t) => t == this.tableSelect[i]
          )
          // 删除装在明细内的所有与要删除的箱号相同的货物
          this.detailData.packings.forEach((item, index) => {
            if (item.containerId == this.tableSelect[i].containerId) {
              this.detailData.packings.splice(index, 1)
            }
          })
          if (deleteIndex > -1) {
            this.tableData.boxAndCargoTableData.splice(deleteIndex, 1)
          }
        }
        console.log(
          this.tableData.boxAndCargoTableData,
          this.detailData.packings,
          'setBox'
        )
        this.$refs.tableRef.clearSelection()
      } else {
        this.$message.warning('请至少选择一条数据')
      }
    },
    cancel() {
      this.dialogData.show = false
    }
  },
  watch: {
    showBtn: {
      handler(newVal, oldVal) {
        if (!newVal) {
          this.columnIndex = -1
          this.rowIndex = -1
        }
      },
      deep: true, // 深度侦听(对象里面层的值改变)
      immediate: true // 立即侦听(网页打开handler执行一次)
    },
    'tableData.boxAndCargoTableData': {
      handler(newVal, oldVal) {
        this.calculateSum = {
          pkgsSum: 0,
          weightSum: 0,
          volumSum: 0
        }
        for (const iterator of this.tableData.boxAndCargoTableData) {
          this.calculateSum.pkgsSum += iterator.pkgs
            ? parseInt(iterator.pkgs)
            : 0
          this.calculateSum.weightSum += iterator.grossWeight
            ? parseFloat(iterator.grossWeight)
            : 0
          this.calculateSum.volumSum += iterator.measurement
            ? parseFloat(iterator.measurement)
            : 0
        }
        if (this.rowBoxs && this.tableData.boxAndCargoTableData.length) {
          // 将对应会中的数据添加对应集装箱中
          for (const item of this.detailData.containers) {
            if (item.id == this.rowBoxs.id) {
              item.pkgs = this.calculateSum.pkgsSum
              item.weight = this.calculateSum.weightSum
              item.measurement = this.calculateSum.volumSum
              break
            }
          }
        }
      },
      deep: true, // 深度侦听(对象里面层的值改变)
      immediate: true // 立即侦听(网页打开handler执行一次)
    }
  }
})
</script>
<style lang="scss" scoped>
@import '@/styles/business/business.scss';

:deep(.el-table) {
  .el-table__header th {
    background-color: #f7f8fa;
  }
  .cell {
    height: 32px;
    line-height: 32px;
  }
  .el-table_1_column_1 .cell {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .el-table__cell {
    padding: 0;
    height: 32px;
  }
  .el-input-number {
    width: 100%;
    .el-input__inner {
      text-align: left;
      padding: 0 8px;
    }
    .el-input-number__decrease {
      display: none;
    }
    .el-input-number__increase {
      display: none;
    }
  }
  .el-input__inner {
    padding: 0 8px;
  }
  .el-date-editor {
    .el-input__prefix {
      display: none;
    }
  }
}
:deep(.el-dialog) {
  padding: 0px;
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
    padding: 8px 16px;
  }

  .el-dialog__body {
    // padding: 8px 12px 8px 18px;
    padding: 0;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
    text-align: center;
  }

  .cargo-container {
    margin: 8px 12px 8px 18px;
    .statistical-information {
      padding: 4px 8px;
      background: #f3f3f3;
      width: 100%;
    }
    .statistical-title {
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
    }
    .statistical-number {
      color: #5a9cf8;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      margin-right: 12px;
    }
    .el-table th .cell {
      background: #f8f8f8;
    }
    .el-checkbox.el-checkbox--small .el-checkbox__inner {
      width: 16px;
      height: 16px;
    }
    .el-checkbox.el-checkbox--small .el-checkbox__inner::after {
      height: 8px;
    }
    .el-checkbox.el-checkbox--small .el-checkbox__inner:after {
      width: 5px;
    }
  }
  .el-form-item__label {
    padding: 0px;
    color: #000000d8;
    font-family: PingFang SC;
    font-weight: normal;
    letter-spacing: 0px;
  }
}

:deep(.el-checkbox) {
  height: 100%;
}
</style>
